<template>
    <div class="dialogs">
        <el-dialog :title="isAdd ? '添加轮播图' : '修改轮播图'" center :visible.sync="isShow" :before-close="cancel">
            <el-form ref="refDialog" :rules="rulse" :model="form">
                <!-- 标题 -->
                <el-form-item prop="title" label="标题" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 图片上传upload -->
                <el-form-item label="图片" :label-width="formLabelWidth">
                    <el-upload action="#" :auto-upload="false" :file-list="fileList" :on-change="onchange"
                        :on-preview="onPreview" :on-remove="onRemove" :on-exceed="handExceed" :limit="1"
                        list-type="picture-card">
                        <!-- :on-preview="handlePictureCardPreview" :on-remove="handleRemove" -->
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <!-- 状态修改 -->
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="gray" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="confirm" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapActions } from 'vuex'
import { banneradd, bannerinfo, banneredit } from "../../request/api.js"
export default {
    data() {
        return {
            value: 1,
            form: {
                title: '',
                img: '',
                status: 1,
            },
            rulse: {
                title: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ]
            },
            formLabelWidth: '120px',
            //图片上传的操作
            dialogImageUrl: '',
            dialogVisible: false,
            //上传的文件列表
            fileList: []
        }
    },
    props: ["isShow", "isAdd"],
    mounted() {

    },
    methods: {
        ...mapActions({
            getChartsList: 'charts/getChartsList'
        }),
        //关闭dialog
        cancel() {
            this.$emit('cancel')
            this.reset()
        },
        reset() {
            this.form = {
                title: '',
                img: '',
                status: 1,
            }
            this.fileList = []
            this.$refs.refDialog.resetFields()
        },
        //上传图片的操作
        onPreview(file) {
            //显示弹窗
            this.dialogVisible = true
            this.dialogImageUrl = file.url
        },
        //图片移除
        onRemove(file, fileList) {
            this.dialogVisible = false
        },
        //文件状态改变
        onchange(file, fileList) {
            this.form.img = file.raw
        },
        //文件上传个数超出
        handExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        //轮播图添加
        confirm() {
            this.$refs.refDialog.validate((val) => {
                // console.log(this.form);
                if (val) {
                    if (this.isAdd) {
                        banneradd(this.form).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                //关闭弹框
                                this.cancel()
                                //重新调用列表数据
                                this.getChartsList()
                            }
                        }).catch(res => {
                            this.$message.error(res.msg)
                        })
                    } else {
                        banneredit(this.form).then(res => {
                            // console.log(this.form);
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                //关闭cancel
                                this.cancel()
                                //重新获取数据
                                this.getChartsList()
                            }
                        }).catch(res => {
                            this.$message.error(res.msg)
                        })
                    }

                }
            })
        },
        //点击编辑  id传入
        lookup(id) {
            bannerinfo({ id }).then(res => {
                if (res.code == 200) {
                    this.form = res.list
                    this.form.id = id
                    this.fileList = this.form.img ? [{ url: "http://localhost:3000" + this.form.img }] : []
                }
            })
        }
    }
}
</script>
<style scoped></style>
